<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<select id="first">
			<option value="-1">---请选择---</option>
		</select>
		<select id="second">
		<option value="-1">---请选择---</option>
		</select>
	</body>
	
	<script type="text/javascript">
		(function(){
			//获取必要的节点
			let firstSelect = document.getElementById('first');
			let secondSelect = document.getElementById('second');
			let xhr = new XMLHttpRequest();
			
			//SlectServlet?id=...
			//id:上一级行政区域的id
			//areaSelect:本级别行政区域
			let loadArea = function(id,areaSelect){
				//先清空
				areaSelect.innerHTML="<option value='-1'>---请选择---</option>"
				
				xhr.open("get","http://10.0.149.221:8081/AjaxDemo7/SelectServlet?id="+id,true);
				xhr.send(null);
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						let areas = JSON.parse(xhr.responseText);
						for(area of areas){
							let option = new Option(area.name,area.id);
							areaSelect.add(option);
							
						}
					}	
				}
				firstSelect.addEventListener('change',function(e){
					loadArea(this.options[this.options.selectedIndex].value,secondSelect);
					
				});
				
			}
			
			loadArea(0,firstSelect);
			
		})();
		
		
	</script>
</html>
